
<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %>  
<html>
<body>
<h2>Hello World!</h2>



<button id="loadData">加载数据</button>
<button id="openAddPanel">添加数据</button>
<button id="deleteSelected">删除选择</button>

<a href="user/update">添加新用户</a>
<a href="user/update">添加新用户</a>

<div style="height:50px;"></div>
<div class="contain"> 
	<table >
		<thead>
			<tr><th>ID</th><th>NAME</th>
				<th>ADDRESS</th></tr>
		</thead>
		<tbody id="wtb">
		</tbody>		
	</table>
	<div class="pagnation">分页信息</div>
</div>
<script type="text/javascript">
var btn = document.querySelector("#loadData");

var tbody = document.querySelector("#wtb");
 
btn.onclick=function(){
		function callback(data){
		       var obj = data;
		       var temp = "";
		       for(var i=0;i< obj.length ; i++){
		    	   temp += "<tr><td>"+obj[i].no+"</td><td>"+obj[i].name+"</td><td>"+obj[i].address+"</td></tr>";
		       }
		       tbody.innerHTML = temp;
		}
		sendXMLHttp({"url":"user/json?pageSize=15&page=1", "method":"GET" , "callback":callback});
}


function sendXMLHttp(opts){
	var xhr;  
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
		xhr.overrideMimeType("text/xml");
	}
	xhr.onreadystatechange = function(){
		if(xhr.readyState==4){
		   if(xhr.status==200){
		       var obj = JSON.parse(xhr.responseText);
		       opts.callback && opts.callback(obj.list);
		       xhr.onreadystatechange = new Function();
		       xhr = null;
		    }   
		}  
	};
	xhr.open(opts.method,opts.url, true);
	xhr.send(null);	 
}


tbody.onclick = function(e){
	var ele = e.target ; 
	if(ele.tagName && ele.tagName.toUpperCase() == "TD"){
		var cut = document.querySelector(".active");
		if(ele.parentNode.getAttribute("class") == "active"){
			ele.parentNode.setAttribute("class" , "");
		}else{
			ele.parentNode.setAttribute("class" , "active");	
		}
	}
}

document.getElementById("deleteSelected").onclick = function(){
	var selectList =  tbody.querySelectorAll(".active");
	var ids = [];
	for(var i = 0; i < selectList.length ; i++){
		var no = selectList[i].children[0];
		var id = no.innerHTML;
		ids.push(id);
	}
	sendXMLHttp({"url":"user/delete?id="+ids.join(","), "method":"GET" , "callback":function(){
		console.log("删除成功!")
		for(var i = 0; i < selectList.length ; i++){
			selectList[i].remove();
		}
	}});
}

</script>
<style type="text/css">
table{
	width:100%; 
}
table, tr, td,th, thead{
	padding:0;
	margin:0;
	border-collapse:collapse;
	table-layout:fixed;
}

table th:nth-child(1){
	width:20%;
}
table th:nth-child(2){
	width:20%;
}
table th{
	height:30px;
	line-height:30px;
}

.pagnation , thead{
	background-color:#3D3E3D;
	color:white;
}
.pagnation{
	position:absolute;
	left:0;
	bottom:0px;
	height:30px;
	line-height:30px;
	text-align:center;
	width:100%;
	
}
tfoot{
	color:white;
	background-color:black;
}
	tr.active{
		background-color:#7E827E;
		color:white;
	}
	td{
		height:20px;
	}
	.contain{
		width:500px;
		height:360px;
		position:relative;
		box-shadow:0px 0px 3px black;
		border-radius:3px;
	}
</style>



<div class="panel">
	<div class="panel-bg"></div>
	<div class="ct">
		<form   name="fileinfo">
			<label>ID:</label>
			<input name="id" type=text>
			<br >
			<label>name:</label>
			<input name="name" type=text>
			<br >
			<label>地址:</label>
			<input name="address" type=text>
			<br >
			<label>附件:</label>
			<input name="attachment" type="file">
			<br >
			
		</form>
		<button id="save_btn_form" >保存数据</button>
			<button id="close_btn_form" >关闭</button>
	</div>
	
</div>
<style>
	.panel{
		top:0;
		left:0;	
		position:fixed;
		height:100%;
		width:100%;
		z-index:2;
		display:none; 
	}
	.panel .panel-bg{
		position:absolute;
		height:100%;
		width:100%;
		background-color:black;
		opacity:0.2;
		top:0;
		left:0;
	}
	.ct{
		background:white;
		width:400px;
		margin:100px auto 0;
		position:relative;
	}
</style>
<script>
var bg = document.querySelector(".panel-bg");
var panel = document.querySelector(".panel");
bg.onclick = function(){	
	closePanel();
}
document.querySelector("#close_btn_form").onclick = closePanel;

function closePanel(){
	panel.style.display= "none";
}
var add_btn  = document.getElementById("openAddPanel")
add_btn.onclick = function(){
	panel.style.display= "block";	
}
var save_btn_form = document.querySelector("#save_btn_form");

save_btn_form.onclick = function(){
	var fm = document.forms.namedItem("fileinfo");
	/* console.log(fm["id"].value) */
	
	 
	var formData = new FormData(fm);
	 
	 
	  oData.append("CustomField", "This is some extra data");
	 
	  var oReq = new XMLHttpRequest();
	  oReq.open("POST", "user/sendForm", true);
	  oReq.onload = function(oEvent) {
	    if (oReq.status == 200) {
	      
	      console.log("执行成功!")		
	    } else { 
	    }
	  };
	 
	  oReq.send(formData);
	
}
</script>
</body>
</html>
